<template>
    <div class="wrap">
        <div class="container">
            <!-- 面包屑 -->
            <div class="products_block ">
                <div class="nav_position">
                    <span class="icon_home"></span>您的位置：
                    <div class="position_detail">
                        <nuxt-link to="/">首页</nuxt-link>
                        <span>></span>
                        <span>{{data.factory.name}}</span>
                        <span>></span>
                        <span>{{data.goods_title}}</span>
                    </div>
                </div>
            </div>
            
            <div class="products_xq">
                <div class="cpxx" v-loading="loading">
                  <!--产品切换 begin-->
                    <div class="pro_qiehuan">
                        <div class="swiper-container gallery-thumbs">
                            <div class="swiper-wrapper">
                                <div v-for="(item,index) in data.images" :key="index" class="swiper-slide">
                                    <img :src="$commonImageUrl(item)" />
                                </div>
                            </div>
                        </div>
                    <!-- Swiper -->
                        <div class="swiper-container gallery-top">
                            <div class="swiper-wrapper">
                                <div v-for="(item,index) in data.images" :key="index" class="swiper-slide">
                                    <img :src="$commonImageUrl(item)" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--产品切换 end-->
                    <!--产品描述-->
                    <div class="cpms">
                        <div class="title">{{ data.goods_title }}
                            <!-- <span class="price">230.00</span> -->
                        </div>
                        <div class="desc">{{ data.description }}</div>
                        <div class="bhxh">
                            <span>编号：</span>{{data.product_num}}
                        </div>
                        <div class="bhxh">
                            <span>型号：</span>{{ data.models}}
                        </div>
                        <div class="bhxh guige">
                            <span>规格：</span>
                            <a v-for="(item,index) in data.sku" :key="index" :class="item.active" @click="switchSku(item)">{{ item.sku_name }}</a>
                            <!-- <a>200x20x5mm</a>
                            <a>200x20x5mm</a> -->
                        </div>
                        <div class="bhxh">
                            <span>数量：</span>
                            <el-input-number v-model="number" :min="1" :precision="0"  label="描述文字"></el-input-number>
                            <!-- <div class="num"> -->
                                <!-- <div class="jian">-</div>
                                <input type="number" value="1">
                                <div class="jia">+</div> -->
                            <!-- </div> -->
                        </div>
                        <div class="bhxh">
                            <span>备注：</span>{{ data.remark }}
                        </div>
                        <div class="xqgwc">
                            <li class="active">
                                <a @click="addCart">加入购物车</a>
                            </li>
                            <li>
                                <a @click="submitOrder" class="caigou">立即购买</a>
                            </li>
                        </div>
                    </div>
                </div>
                <!--产品描述-->
                <!--产品详情-->
                <div class="cpxqms">
                    <div class="cpxiangt">产品详情</div>
                    <div class="cpxqcontent" v-html="data.content">
                        
                    </div>
                </div>
                <!--产品详情-->
            </div>
            <!-- 相关产品 -->
            <div class="productxg_content">
                <div class="productxg_title">相关产品</div>
                <div class="productxg_view">
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                    <div class="developlist swiper-container ">
                        <div class="swiper-wrapper">
                            <div v-for="(item,index) in products" :key="index" class="swiper-slide productxg_list">
                                <nuxt-link :to="'/products/prod/' + item.id">
                                    <div class="productxg_list_pic">
                                    <img :src="$commonImageUrl(item.image)" /></div>
                                    <div class="productxg_list_title">{{ item.title }}</div>
                                    <div class="productxg_list_more">
                                    <div>了解详情</div>
                                    <div>
                                        <img src="@/assets/images/more.png" /></div>
                                    </div>
                                </nuxt-link>
                            </div>
                            <!-- <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div>
                            <div class="swiper-slide productxg_list">
                                <div class="productxg_list_pic">
                                <img src="@/assets/images/product1.png" /></div>
                                <div class="productxg_list_title">同种异体肌腱</div>
                                <div class="productxg_list_more">
                                <div>了解详情</div>
                                <div>
                                    <img src="@/assets/images/more.png" /></div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 右侧在线客服 -->
        <div class="floatRight">
            <CustomOrder></CustomOrder>
            <CustomSample></CustomSample>
            <OnlineService></OnlineService>
        </div>
        <!-- 右侧在线客服 结束 -->
        <!-- 采购下单-->
        <el-dialog
            title="采购下单"
            :visible.sync="dialogCgVisible"
            :close-on-click-modal="false"
            width="42%"
            top="2%">
            <div class="dialog-content dz_content">
                <el-form ref="form" :model="form" :show-message="false" status-icons label-width="25%" label-position="left">
                    <el-form-item label="企业信息" class="qy">
                        <div>
                            <span>{{ defaultEnterprise.name }}</span>
                        </div>
                        <div class="name">
                            <p>地址：{{ defaultEnterprise.address }}</p>
                        </div>
                    </el-form-item>
                    <el-form-item label="产品名称">
                        <el-input v-model="form.name" disabled value="同种异体肌腱"></el-input>
                    </el-form-item>
                    <el-form-item label="产品型号">
                        <el-input v-model="form.models" disabled ></el-input>
                    </el-form-item>
                    <el-form-item label="产品规格" prop="filings_sku_id" required>
                        <el-select v-model="form.filings_sku_id" placeholder="请选择或输入产品规格" @change="changeSku">
                            <el-option :label="item.sku_name" :value="item.id" v-for="(item, index) in form.sku" :key="index"></el-option>
                            <!-- <el-option label="名称二" value="beijing"></el-option> -->
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品价格">
                        <el-input v-model="form.price" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="产品备注">
                        <el-input type="textarea" v-model="form.product_remark" placeholder="请填写产品定制要求及备注"></el-input>
                    </el-form-item>
                    <el-form-item label="数量">
                        <el-input-number v-model="form.num" :precision="0" :min="1" label="描述文字" ></el-input-number>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="form.remark" placeholder="请填写备注信息"></el-input>
                    </el-form-item>
                    <div class="cgxdtj">
                    <div class="ddjg">
                        <div class="zong">订单总价：
                        <span class="price">{{ countAmount() }}</span></div>
                        <p>包含产品 {{ form.num }} 件</p>
                    </div>
                    <div class="config_btncgxd" @click="submitOrderInfo">提交</div></div>
                </el-form>
            </div>
        </el-dialog>
        <!-- 采购下单 -->
    </div>
</template>

<script>
import api from "@/api/product";
import cartApi from "@/api/cart";
import enterpriseApi from "@/api/enterprise";
export default {
    name: "prod-info",
    validate({ params }) {
        // 必须是number类型
        return /^\d+$/.test(params.id)
    },
    components: {
        
    },
    data() {
        return {
            data:{
                factory:{

                }
            },
            products: [],
            number: 1,
            loading: false,
            form: {
                sku: [],
                price: 0,
                num: 1
            }, // 下单表单
            defaultEnterprise: {}, // 默认企业
            dialogCgVisible: false, // 采购下单
        }
    },
    created(){
        this.doLoadData();
        this.LoadDefaultEnterprise();     
    },
    mounted: function(){
        // this.swiperFun();
    },
    methods: {
        // 加入购物车
        addCart: function () {
            this.loading = true;
            var sku = this.data.sku.find(x => x.active == "active");
            var input = {
                goods_id: this.data.goods_id,
                goods_num: this.number,
                filings_sku_id: sku.id,
                goods_sku_id: sku.sku_id
            }
            cartApi.AddCart(input)
                .then((res) => {
                    if (res.code == 1) {
                        this.$message.success("成功加入购物车");
                        this.number = 1;
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.loading = false;
                })
                .catch(err => {
                    this.loading = false;
                })
        },
        // 选择规格
        switchSku: function (item) {
            this.data.sku.forEach(element => {
                element.active = "";
            })
            item.active = "active";
            this.$forceUpdate();
            this.number = 1;
        },
        // 点击下单事件
        submitOrder: function () {
            this.dialogCgVisible = true;
            if (this.$refs.form) {
                this.$refs.form.resetFields();
            }
            this.form.name = this.data.goods_title;
            this.form.models = this.data.models;
            this.form.sku = this.data.sku;
            this.form.goods_id = this.data.goods_id;
        },
        // 切换规格
        changeSku: function (val) {
            var sku = this.form.sku.find(x => x.id == val);
            this.form.price = sku.price;
        },
        // 计算商品金额
        countAmount: function () {
            return (this.form.num * this.form.price).toFixed(2);
        },
        // 加载默认企业
        LoadDefaultEnterprise: function () {
            enterpriseApi.GetDefaultEr({})
                .then((res) => {
                    console.log("res", res)
                    if (res.data === null) { 
                        res.data = {};
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                    this.defaultEnterprise = res.data;
                })
        },
        // 点击下单
        submitOrderInfo: function () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    var input = {
                        list: [
                            {
                                goods_id: this.form.goods_id,
                                goods_num: this.form.num,
                                filings_sku_id: this.form.filings_sku_id,
                                remark: this.form.product_remark ? this.form.product_remark : ""
                            }
                        ],
                        remark: this.form.remark ? this.form.remark : "",
                        cart_ids: ""
                    }
                    this.$router.push({path: '/memberCenter/confirm', query: { goods: btoa(JSON.stringify(input)) }})
                }
            })
        },
        doLoadData(){
            this.initProducts();
        },
        initProducts:function(){
            let _this = this;
            let input = {
                id : _this.$route.params.id
            }
            api.GetProductDetail(input)
                .then(res => {
                    _this.data = res.data.goods_info;
                    _this.data.images = _this.data.images.split(",");
                    _this.data.sku.forEach(element => {
                        element.active = "";
                    })
                    _this.data.sku[0].active = "active";
                    _this.products = res.data.products
                    _this.$nextTick(() => {
                        _this.swiperFun();
                    })
                });
        },
        swiperFun:function(){
            //    / *内页产品详情页的产品图片切换*/
            var galleryTop = new Swiper('.pro_qiehuan .gallery-top', {
                nextButton: '.pro_qiehuan  .swiper-button-next',
                prevButton: '.pro_qiehuan  .swiper-button-prev',
                spaceBetween: 0,
            });
            var galleryThumbs = new Swiper('.pro_qiehuan  .gallery-thumbs', {
                spaceBetween: 10,
                centeredSlides: true,
                slidesPerView: 'auto',
                touchRatio: 0.2,
                slideToClickedSlide: true
            });
            galleryTop.params.control = galleryThumbs;
            galleryThumbs.params.control = galleryTop;
            var devepswiper = new Swiper('.developlist', {
                observer: true,
                observeParents: true,
                autoplay: 3500,
                slidesPerView: 4,
                spaceBetween: 40,
                prevButton: '.productxg_view .swiper-button-prev',
                nextButton: '.productxg_view .swiper-button-next',
                breakpoints: {
                    768 : {
                    slidesPerView: 1,
                    spaceBetween: 0,
                    autoHeight: true,
                    },
                    1024 : {
                    slidesPerView: 2,
                    spaceBetween: 20,
                    },
                }
            });
        }
    }
}
</script>
